<template>
  <div class="my_discovery">
    <!--轮播图-->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" width="100%" height="200px" />
      </van-swipe-item>
    </van-swipe>

     <!-- 宫格导航区域 -->
     <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="item in gridData" :key="item.id">
        <van-image :src="item.imgUrl" height="40px" />
        <div class="grid_text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>

    <!--歌单-->
    <div class="music_list">
      <div class="text">发现好歌单</div>
        <van-button plain round type="default" size="small">
          <span>查看更多</span>
        </van-button>
    </div>

      <!-- 歌单列表 -->
    <van-row :gutter="[20, 20]">
      <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)">
        <img :src="item.musicImg" alt="" width="100%" height="180px">
        <div>{{ item.auth }}</div>
      </van-col>
    </van-row>
  </div>
</template>
<script setup>
import { ref } from 'vue'
//跳转歌单详情页
const toMusicList=(id)=>{
  console.log('跳转歌单详情',id);
}
//歌单数据
const musicList = ref([
  { id: 1, musicImg:'https://img1.baidu.com/it/u=389269188,417396444&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',auth:'auth1'},
  { id: 2, musicImg:'https://img1.baidu.com/it/u=3863669988,3201096340&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',auth:'auth2'},
  {id:3,musicImg:'https://photo-static-api.fotomore.com/creative/vcg/veer/612/veer-128736283.jpg',auth:'auth3'},
  {id:4,musicImg:'https://bpic.588ku.com/paixin_pic/22/05/07/f261fedc3e96849dcfce5e78af77d295.jpg',auth:'auth4'}
])
//宫格数据
const gridData = ref([
  { id:1, imgUrl:'https://img0.baidu.com/it/u=1802014747,2894832285&fm=253&fmt=auto&app=138&f=JPEG?w=216&h=216', text: "每日推荐" },
  { id:2, imgUrl:'https://img0.baidu.com/it/u=3502470479,904640796&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', text: "私人FM" },
  { id:3, imgUrl:'https://img1.baidu.com/it/u=382634907,454397836&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', text: "歌单" },
  { id:4, imgUrl:'https://img2.baidu.com/it/u=902944926,1452948855&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=450', text: "排行榜" }
])
//轮播图静态数据
const images = [
  'https://img1.baidu.com/it/u=3238960415,2200429892&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=300',
  'https://img1.baidu.com/it/u=611419371,2104394387&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=300',
  'https://img1.baidu.com/it/u=788345798,1577971918&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=300'
];


</script>
<style scoped>
.my_discover {
  margin-top: 10px;
  padding: 0 10px;
  height: calc(100vh - 110px);
  overflow-y: scroll;
}
.grid_text{
  font-size: 15px;
}
.music_list{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.music_list .text{
  color: #000 ;
  font-size: 18px;
  font-weight: 600;
}
.music_list span{
  color: #000;
}
</style>
